<template>
	<div class="tts-broadcast-modal-wrapper">
		<el-dialog custom-class="tts-broadcast-dialog" :title="getModalTitle" :visible.sync="showTtsBroadcastModal" :before-close="cancelSubmit" :close-on-click-modal="false">
			<div class="add-tts-broadcast-warpper">
				<el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" label-position="top">
					<el-form-item label="标题" prop="title">
						<el-input v-model="form.title" placeholder="请输入TTS辅助播报标题（最长 30 个字符）" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="内容" prop="content">
						<div class="textarea-wrapper">
							<ZcoTextarea
								v-model="form.content"
								placeholder="请输入TTS辅助播报（最长 2000 个字符）"
								maxlength="2000"
								type="textarea"
								:autosize="{ minRows: 8, maxRows: 8 }"
								@input="input"
								id="tts-broadcast-input"
							/>
							<span class="wordLimitSpan">{{ form.content ? form.content.length : 0 }} / 2000</span>
							<span class="add-icon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelSubmit">取 消</el-button>
				<el-button type="primary" @click="submitTtsBroadcast">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 用户变量 -->
		<UserAttribute v-if="isShowUserAttribute" :dialogVisible="isShowUserAttribute" :taskId="taskId" @on-ok="onChosseUserAttribute" @on-cancel="onCloseUserAttribute" />
	</div>
</template>

<script>
import ZcoTextarea from '../../AiWorkFlow/components/TinymceTextarea.vue';
import UserAttribute from '../../AiWorkFlow/AiTemplateView/UserAttribute.vue';
import { insertStr } from '@/utils/tool';
export default {
	components: {
		ZcoTextarea,
		UserAttribute
	},
	props: {
		showTtsBroadcastModal: {
			type: Boolean,
			default: () => false
		},
		mode: {
			type: String,
			default: () => 'add'
		},
		dialogData: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		getModalTitle() {
			return this.mode === 'add' ? '添加TTS辅助播报' : '修改TTS辅助播报';
		}
	},
	mounted() {
		this.form = {...this.dialogData};
	},
	data() {
		const validateTitle = (rule, value, callback) => {
			// 标题最多30个汉字
			if (value.length > 30){
				this.form.title = value.substring(0, 30);
				callback(new Error('格式错误，标题长度必须大于 1 小于 30'));
			} else if (value.trim().length < 1){
				callback(new Error('格式错误，标题长度必须大于 1 小于 30'));
			} else {
				callback();
			}
		};
		const validateContent = (rule, value, callback) => {
			// 内容最多2000个汉字
			const maxLength = 2000;
			if (value.length > maxLength){
				callback(new Error(`格式错误，标题长度必须大于 1 小于 ${maxLength}`));
			} else if (value.trim().length < 1){
				callback(new Error(`格式错误，标题长度必须大于 1 小于 ${maxLength}`));
			} else {
				callback();
			}
		};
		return {
			isError: false,
			rules: {
				title: [
					{ required: true, message: '请输入TTS辅助播报标题', trigger: 'blur' },
					{ validator: validateTitle, trigger: ['blur'] }
				],
				content: [
					{ required: true, message: '请输入TTS辅助播报内容', trigger: ['blur', 'change'] },
					{ validator: validateContent, trigger: ['blur', 'change'] }
				]
			},
			form: {
				title: '',
				content: ''
			},
			isShowUserAttribute: false,
			taskId: ''
		};
	},
	methods: {
		submitTtsBroadcast() {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					this.$emit('submitTtsBroadcast', this.form);
				} else {
					return false;
				}
			});
		},
		cancelSubmit() {
			this.$emit('cancelSubmit');
		},
		input(value) {
			this.form.content = value;
			this.$refs.ruleForm.validateField(['content']);
		},
		onAddVariable(val, data) {
			this.isShowUserAttribute = true;
			console.log(data);
		},
		onCloseUserAttribute() {
			this.isShowUserAttribute = false;
		},
		// 变量插入
		onChosseUserAttribute(data, businessData) {
			let variable = '';
			if (data && data.name) {
				// 客户信息_角色名_变量名
				const wordsDom = document.getElementById('tts-broadcast-inputtextarea');
				variable = `{{客户信息_${data.bizscenario_role.name}_${data.name}_${data.id}}}`;
				insertStr('', wordsDom, variable);
			}
			if (businessData && businessData.name) {
				// 业务信息_变量名
				const wordsDom = document.getElementById('tts-broadcast-inputtextarea');
				variable = `{{业务信息_${businessData.name}_${businessData.id}}}`;
				insertStr('', wordsDom, variable);
			}

			this.isShowUserAttribute = false;
		}
	}
};
</script>

<style lang="less" scoped>
.tts-broadcast-modal-wrapper {
	.textarea-wrapper {
		display: flex;
	}

	.add-icon {
		margin-left: 20px;
	}
}
.wordLimitSpan {
	position: absolute;
	bottom: -30px;
	right: 60px;
}
</style>
<style>
.tts-broadcast-modal-wrapper .el-dialog__header {
	border-bottom: 1px solid #eee;
}
</style>
